<template>
	<view class="i_container">
		<view class="time_box">
			<view class="time_box_top">
				<view class="recode_top">
					<view class="recode_top_item">
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date1" @change="bindDateChange1">
								<view class="uni-input txt_time">{{date1}}</view>
							</picker>
						</view>
					</view>
					<text class="recode_top_center">至</text>
					<view class="recode_top_item">
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date" @change="bindDateChange">
								<view class="uni-input txt_time">{{date}}</view>
							</picker>
						</view>
					</view>
				</view>
				<text class="timeQuery" @click="query">筛选</text>
			</view>
			<view class="title_nav_info">
				<span>当前时间段共消费:<span style="color: red;">{{totalAmount==null?0:totalAmount}}</span>元</span>
			</view>
			<view class="list_container">
				<template v-if="consumeList.length == 0">
					<noContent></noContent>
				</template>
				<template v-else>
					<scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
						@scrolltolower="lower" @scroll="scroll">
						<view class="l_item_box" v-for="(item, index) in consumeList" :key="index">
							<view class="l_i_b_box">
								<view class="l_ite_top">
									<template v-if="item.consumMode==2">
										<text class="s_type">{{item.stationName}}-{{item.mealName?item.mealName:''}}-{{getPayPath(item.payChannel)}}-<text
												style="color: red;">脱机</text></text>
									</template>
									<template v-else>
										<text
											class="s_type">{{item.stationName}}-{{item.mealName?item.mealName:''}}-{{getPayPath(item.payChannel)}}</text>
									</template>

									<text class="scroll_time">{{item.billTime}}</text>
								</view>
								<view class="l_ite_top">
									<text>{{getCheckNum(item.amount)}}</text>
									<text class="type_detail" v-if="item.payChannel == 3"
										@click="jumpDetail(item.orderNo)">详情</text>
								</view>
							</view>
						</view>
						<view class="item_f_box" v-show="isNoData">
							<text class="scroll_time">没有更多数据啦~</text>
						</view>
					</scroll-view>
				</template>

			</view>
		</view>
		<view v-if="isShow" class="tan_box">
			<view class="tan_item">
				<view v-for="(item, indexs) in boxList" :key="indexs" class="item_box"
					:class="{'activeBack' : currentIndexs == item.index}" @click="jumpTab(item.index)">
					{{item.txt}}
				</view>
				<view class="less_con"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		querySTConsumeLog,
		queryWaterConsumeLog
	} from '../../common/api/index.js';
	import {
		_showLoading,
		_showToast
	} from '../../common/js/util.js'
	import noContent from '../../components/no-content.vue'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			const currentDate1 = this.getDate1({
				format: true
			})
			return {
				tabs: [{
					activeIndex: 0,
					title: '食堂消费'
				}, {
					activeIndex: 1,
					title: '热水消费'
				}],
				activeIndex: 0,
				date: currentDate,
				date1: currentDate1,
				height: '600rpx',
				currentPage: 1,
				orgId: '',
				empId: '',
				isShow: false,
				currentIndexs: 0,
				consumeList: [],
				boxList: [{
						index: 0,
						txt: '全部'
					},
					{
						index: 1,
						txt: '刷卡'
					},
					{
						index: 2,
						txt: '实时二维码'
					},
					{
						index: 3,
						txt: '脱机二维码'
					},
					{
						index: 4,
						txt: '微信付款码'
					},
					{
						index: 5,
						txt: '支付宝付款码'
					},
					{
						index: 6,
						txt: '实时人脸识别'
					},
					{
						index: 9,
						txt: '二类户'
					}
				],
				set_up: 2, //步骤一
				stuList: [],
				pageSize: 20,
				totalAmount: 0,
				isNoData: false
			}
		},
		components: {
			noContent
		},
		computed: {
			getCheckNum(amount) {
				return function(amount) {
					if (amount > 0) {
						return '-' + Number(amount).toFixed(2);
					} else if (amount < 0) {
						return '+' + -Number(amount).toFixed(2);
					} else {
						return amount
					}
				}
			}
		},
		onLoad: function(option) {
			// console.log(option)
			this.orgId = option.orgId
			this.empId = option.empId
			this._querySTConsumeLog(true)
		},
		methods: {
			getPayPath(index) {
				let m = new Map([
					[1, '刷卡'],
					[2, '实时二维码'],
					[3, '脱机二维码'],
					[4, '微信付款码'],
					[5, '支付宝付款码'],
					[6, '实时人脸识别'],
					[9, '二类户'],
				])
				return m.get(index)
			},
			jumpDetail(orderNo) {
				uni.navigateTo({
					url: '/pagePayment/qrcode/consumeQrcode1?orderNo=' + orderNo + '&empId=' + this
						.empId +
						'&orgId=' + this.orgId
				})
			},
			lower() {
				console.log("触底了")
				this._querySTConsumeLog()
			},
			upper() {},
			scroll() {

			},
			jumpTab(index) {
				this.currentIndexs = index;
				this._querySTConsumeLog(true)
				this.isShow = false
			},
			query() {
				this.isShow = true
			},
			_querySTConsumeLog(val = false) {
				_showLoading('加载中...')
				if (val) {
					this.currentPage = 1
				} else {
					this.currentPage += 1
				}
				querySTConsumeLog({
					loginOrgId: this.orgId,
					appId: 1,
					userId: uni.getStorageSync("s_userId"),
					startDate: this.date1.replace(/-/g, ''),
					endDate: this.date.replace(/-/g, ''),
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					payChannel: this.currentIndexs,
					type: 1,
					empId: this.empId
				}).then(res => {
					// console.log(res)
					if (val) {
						if (res.resultCode == 0) {
							if (res.rows.length < this.pageSize) {
								this.isNoData = true
							} else {
								this.isNoData = false
							}
							this.consumeList = res.rows
							this.totalAmount = res.totalAmount
							uni.hideLoading()
						} else {
							uni.hideLoading()
						}
					} else {
						if (res.resultCode == 0) {
							if (res.rows.length < this.pageSize) {
								this.isNoData = true
							} else {
								this.isNoData = false
							}
							this.consumeList = this.consumeList.concat(res.rows)
							uni.hideLoading()
						} else {
							uni.hideLoading()
						}
					}

				}).catch(err => {
					uni.hideLoading()
					this.isNoData = true
					console.log(err)
				})
				// console.log(uni.getStorageSync("s_userId"), this.empId)
				// console.log({
				// 	loginOrgId: this.orgId,
				// 	appId: 1,
				// 	userId: uni.getStorageSync("s_userId"),
				// 	startDate: this.date1.replace(/-/g, ''),
				// 	endDate: this.date.replace(/-/g, ''),
				// 	currentPage: this.currentPage,
				// 	pageSize: this.pageSize,
				// 	payChannel: this.currentIndexs,
				// 	type: 1,
				// 	empId: this.empId
				// })

			},
			bindDateChange1: function(e) {
				let far = new Date(this.date) - new Date(e.target.value)
				if (far < 0) {
					uni.showToast({
						icon:"none",
						title: '开始时间不能大于结束时间!',
						duration: 2500
					});
					return
				}
				let maxQueryTime = 2 * 30 * 24 * 60 * 60 * 1000
				if (far > maxQueryTime) {
					uni.showToast({
						icon:"none",
						title: '查询跨度不能超过60天!',
						duration: 2500
					});
					return
				}
				this.date1 = e.target.value
				this.date1 = this.date1.toString().replace(/\//g, "-")
				this._querySTConsumeLog(true)
			},
			bindDateChange: function(e) {
				let far = new Date(e.target.value) - new Date(this.date1)
				if (far < 0) {
					uni.showToast({
						icon:"none",
						title: '结束时间不能小于开始时间!',
						duration: 2500
					});
					return
				}
				let maxQueryTime = 2 * 30 * 24 * 60 * 60 * 1000
				if (far > maxQueryTime) {
					uni.showToast({
						icon:"none",
						title: '查询跨度不能超过60天!',
						duration: 2500
					});
					return
				}
				this.date = e.target.value
				this.date = this.date.toString().replace(/\//g, "-")
				this._querySTConsumeLog(true)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getDate1(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.i_container {
		background-color: #F8F8F8;
		overflow: hidden;
		height: 100vh;

		.fix_title {
			margin: 30upx 0 60upx 40upx;
			font-size: 40upx;
			font-weight: bolder;
			display: flex;
			align-items: center;

			&::before {
				content: '';
				height: 36upx;
				width: 12upx;
				background-image: linear-gradient(to bottom, #c3defc, #007AFF);
				margin-right: 12upx;
				border-radius: 6upx;
			}
		}

		.card {
			width: 690rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 26rpx 1rpx rgba(0, 0, 0, 0.06);
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			opacity: 1;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 28rpx;
			margin-bottom: 32rpx;

			.kpl {
				display: flex;
				justify-content: space-between;
			}
		}

		.time_box {
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			height: 100%;

			.time_box_top {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				padding: 0 20rpx;
				box-sizing: border-box;
				height: 96rpx;

				.recode_top {
					width: 70%;
					display: flex;
					flex-direction: row;
					align-items: center;
					background: #FFFFFF;
					border-radius: 8rpx;

					.recode_top_item {
						display: flex;
						flex: 1;
						justify-content: center;

						.uni-input {
							font-size: 28rpx;
						}

						.txt_time {
							color: #169BD5;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.recode_top_center {
						font-family: 'Arial Normal', 'Arial';
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}
				}

				.timeQuery {
					font-size: 28rpx;
					font-family: "PingFang-SC-Medium, PingFang-SC";
					font-weight: 500;
					color: #FFFFFF;
					background: #185AFF;
					border-radius: 8rpx;
					padding: 12rpx 24rpx;
				}
			}

			.title_nav_info {
				height: 50rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				// color: #007AFF;
				font-weight: bold;
				justify-content:flex-end;
				background-color: #fff;
			}

			.list_container {
				background-color: #fff;
				height: calc(100% - 196rpx);
				box-sizing: border-box;

				.scroll-Y {
					height: 100%;
					padding: 30rpx 0rpx;
					box-sizing: border-box;
					position: relative;

					.l_item_box {
						display: flex;
						lex-direction: row;
						align-items: center;

						.l_i_b_box {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
							flex: 1;
							border-bottom: 1px solid #dddddd;
							margin-top: 10rpx;
							padding: 0 10rpx;

							.l_ite_top {
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								line-height: 50rpx;

								.s_type {
									font-size: $font-size-base;
									font-weight: 500;
									color: #6B707A;
								}

								.scroll_time {
									font-size: 24rpx;
									font-weight: 500;
									color: #6B707A;
								}

								.type_detail {
									font-size: $font-size-base;
									font-weight: 500;
									color: #6B707A;
									border: 1px solid #ddd;
									display: flex;
									justify-content: center;
									align-items: center;
									border-radius: 5px;
									width: 45px;
								}
							}
						}
					}

					.item_f_box {
						height: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.scroll_time {
							font-size: 24rpx;
							font-family: "PingFangSC-Medium, PingFang SC";
							font-weight: 500;
							color: #6B707A;
						}
					}
				}


			}
		}

		.tan_box {
			background: rgba(0, 0, 0, .2);
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 0;
			z-index: 999;

			.tan_item {
				width: 90%;
				height: auto;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-content: flex-start;
				flex-wrap: wrap;
				background: #fff;

				.item_box {
					width: 33%;
					height: 40px;
					display: flex;
					justify-content: center;
					align-items: center;
					border-right: 1px solid #ddd;
					border-bottom: 1px solid #ddd;
				}

				.item_box:nth-of-type(3n) {
					border-right: none;
					border-bottom: 1px solid #ddd;
				}

				.less_con {
					width: 33%;
					height: 40px;
					border-bottom: 1px solid #ddd;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}

	.activeBack {
		background: #185AFF;
		color: #ffffff;
	}
</style>